<template>
    <div>

      <!-- 内容区域 -->
      <el-card class="box-card">
        <!-- 搜索条件 -->
        <!-- el-row：1行24分栏，gutter ：列间隙20px，默认0-->
        <el-row :gutter="20">
          <!-- el-col：span：占用的分栏数，默认1 -->
          <el-col :span="8">
            <!-- el-input：placeholder：占位符，v-model：双向绑定数据 -->
            <el-input placeholder="请输入内容" v-model="queryParam">
              <!-- 通过具名插槽的方式来定义输入框后的查询按钮 -->
              <template #append>
                <el-button icon="Search" @click="getLog" />
              </template>
            </el-input>
          </el-col>
        </el-row>
  
        <!-- 搜索结果 -->
        <!-- stripe ：是否为斑马纹 border：是否带边框 -->
          <el-table :data="result.data" border stripe>
            <el-table-column label="序号" type="index" width="100"> </el-table-column>
            <el-table-column prop="username" label="用户名" width="350"> </el-table-column>
            <el-table-column label="时间" prop="logTime"></el-table-column>
            <el-table-column label="信息" prop="logInfo"></el-table-column>
          </el-table>
        <!-- 分页组件: total必须是number -->
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="queryParams.total" :page-sizes="[1,5, 10, 20]" :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum" @current-change="pageNumChange" @size-change="pageSizeChange" />
        </div>
      </el-card>
    </div>
  
  </template>
  
  <script setup>
  // 获取路由器实例和路由实例
  // 注入全局属性
  import { inject ,onMounted} from 'vue'
  let $http = inject('$http');
  
  // 引入Vue相关API
  import { ref } from 'vue'

  // 查询参数
  const queryParams = ref({
    pageNum: 1,
    pageSize: 5,
    queryParam: '',
  })
  // 查询结果
  const result = ref({})
  const queryParam = ref('')
  // 获取用户列表
  const getLog = function () {
    queryParams.value.queryParam = queryParam.value
    $http({
      method: 'post',
      url: '/logs/getlog',
      data: queryParams.value,
    }).then(response => {
      result.value.data = response.data.data.list
      queryParams.value = response.data.data
    })
  }
  /* 2: 分页 */
  const pageSizeChange = function (newPageSize) {
    queryParams.value.pageSize = newPageSize
    getLog()
  }
  const pageNumChange = function (newPageNum) {
    queryParams.value.pageNum = newPageNum
    getLog()
  }
  onMounted(() => {
    getLog();
  })
  </script>
  